<template>
  <div id="menuConfiguration">
    <el-card class="box-card">
      <!-- 头部 -->
      <template #header>
        <div class="card-header">
          <div>帮助指南</div>
          <div class="search">
            <el-input
              v-model.trim="searchData.search"
              @input="searchChange"
              clearable
              style="width: 240px"
              @clear="changeSearch"
              placeholder="请输入关键词..."
              :prefix-icon="Search"
            >
              <template #append>
                <el-button type="primary" size="large" @click="searchBtn"
                  >搜索</el-button
                >
              </template>
            </el-input>
          </div>
        </div>
      </template>
      <!-- 菜单 -->
      <el-row class="tac">
        <el-col :span="4">
          <ul class="list" v-if="tags">
            <li
              v-for="(item, index) in list"
              :key="index"
              @click="btn(item, index)"
            >
              <div class="tc" :class="current == index ? 'isSelect' : ''">
                {{ item.name }}
              </div>
            </li>
          </ul>
        </el-col>
        <el-col :span="20">
          <ul class="infinite-list" style="overflow: auto">
            <template v-if="stutas">
              <li
                v-for="(item, index) in tableData"
                :key="index"
                class="infinite-list-item"
                @click="ChildBtn(item)"
              >
                <p>{{ item.name }}</p>
              </li>
            </template>
            <template v-else>
              <div style="padding: 10px 40px; cursor: pointer">
                <p @click="back">
                  <ArrowLeftBold
                    style="
                      width: 20px;
                      height: 20px;
                      position: relative;
                      top: 3px;
                    "
                  />
                  {{ title }}
                </p>
                <p v-html="content" style="width: 100%" class="rech-text"></p>
              </div>
            </template>
          </ul>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { typeList, articleList } from '@/api/helpguide/index';
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';

const list = ref([]);
const content = ref('');
const title = ref('');
const tags = ref(true);
const current = ref(0);
const back = () => {
  stutas.value = true;
};
const stutas = ref(true);

const tableData = ref([]);

let params = ref({
  type: 1,
  page: 1,
  pageSize: 100,
});

const searchData = ref({
  page: 1,
  pageSize: 100,
  search: '',
});
// 获取列表
const getList = () => {
  typeList().then((res) => {
    list.value = res.data;
  });
};
//文章列表数据
const articleArr = () => {
  articleList(params.value).then((res) => {
    tableData.value = res.data.data;
  });
};

let btn = (item, index) => {
  stutas.value = true;
  params.value.type = item.id;
  current.value = index;
  articleArr(params.value);
};
let ChildBtn = (item) => {
  stutas.value = !stutas.value;
  content.value = item.content;
  title.value = item.name;
};
const changeSearch = () => {
  searchData.value.search == '' ? (tags.value = true) : '';
  // stutas.value = true
};
const searchChange = () => {
  if (searchData.value.search == '') tags.value = true;
  articleArr();
};

// 搜索
let searchBtn = () => {
  if (searchData.value.search == '') return;
  tags.value = false;
  articleList(searchData.value).then((res) => {
    tableData.value = res.data.data;
  });
};

onMounted(() => {
  getList();
  articleArr();
});
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .list {
    text-align: center;
    line-height: 32px;
    cursor: pointer;
  }
}

:deep(.el-menu) {
  height: 100%;

  .tc {
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .el-menu-item {
    display: flex;
    align-items: center;
    height: 32px;
    line-height: 32px;
  }
}

.btns {
  display: flex;
  cursor: pointer;

  .textBtn {
    color: #444;
    font-size: 14px;
    margin-left: 30px;
  }
}

.infinite-list {
  height: 560px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item:hover {
  color: #165dff;
  font-weight: bold;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  padding: 10px 40px;
  color: #000;
  font-weight: bold;
  cursor: pointer;

  .textBox {
    flex: 1;

    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .title {
        font-size: 16px;
        color: #1d2129;
        left: 94px;
        top: 20px;
        cursor: pointer;
        font-weight: 700;
      }

      .desc {
        display: inline-block;
        margin-left: 16px;
        font-weight: 400;
        font-size: 12px;
        color: #86909c;
        max-width: 350px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .btn {
        text-align: right;
        flex: 1;
        font-size: 14px;
        color: #165dff;
        cursor: pointer;
      }
    }

    .bottom {
      display: flex;
      justify-content: space-between;

      .price {
        flex: 1;
        text-align: right;
        font-size: 12px;
        color: #4e5969;
      }

      .info {
        font-weight: 400;
        font-size: 12px;
        color: #86909c;

        span {
          margin-left: 8px;
        }
      }
    }
  }
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
.isSelect {
  color: #165dff;
}
:deep(.rech-text) {
  img,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    width: 100% !important;
  }
}
</style>
